// 设置axios 默认实例上设置基地址
// axios.defaults.baseURL = location.origin
const baseURL = location.origin
// console.log(location.origin)
// 完整的url地址
const url = window.location.href
// console.log(url); // 输出当前页面的完整URL

const link = url + ''
// console.log(link)

const qrcode = new QRCode(document.getElementById('qrcode'), {
  text: link, // 要编码的链接
  width: 150, // 二维码的宽度
  height: 150, // 二维码的高度
  colorDark: '#000000', // 暗色区域的颜色
  colorLight: '#ffffff', // 亮色区域的erwma颜色
  correctLevel: QRCode.CorrectLevel.H, // 纠错级别
})

// 创建一个新的Date对象，它将自动设置为当前的日期和时间
const now = new Date()

// 获取年、月、日
const year = now.getFullYear()
const month = now.getMonth() + 1 // 月份是从0开始计数的，所以要加1
const day = now.getDate()

// 组合成字符串
const currentDate = year + '-' + month + '-' + day

// 输出当前日期
// console.log(currentDate);
// 将格式化后的时间插入到HTML中

// document.querySelector('.rq').innerHTML = currentDate
// document.querySelector('.realTime').innerHTML = currentDate

/*天目登录*/
window.CP2.showLogin().then((res) => {
  // console.log(res.data.accountId);
  const accountId = res.data.accountId
  const sessionId = res.data.sessionId
  loginApi(liveId, accountId, sessionId)
})

// 登录的Api
function loginApi(liveId, accountId, sessionId) {
  axios({
    url:
      'https://pic.nbblmc.cn/api/tmu/getUserMessage?accountId=' +
      accountId +
      '&sessionId=' +
      sessionId +
      '&liveId=' +
      liveId,
    method: 'GET',
  }).then((res) => {
    console.log(res)
  })
}

let imageList = [] // 声明 imageList 变量并初始化为空数组

let imageWaterfallFlowList = []

// 正序
let imgageListz = []

// 反序
let imgageListf = []

// 点击时间线
let imgageTimeList = []

// 轮播图的图片
let imageSwiper = []

// 逆序轮播图的图片
let imageNxSwiper = []

let liveId = getUrlKey('id')
// console.log(liveId)

// 热门轮播图的图片
let houtImageSwiper = []

// 存储图片定时器的引用
let renderInterval

// 存储热门定时器的引用
let renderHotInterval

// 存储直播对象定时器的引用
let renderObjInterval

// 图片直播渲染
function imageRender() {
  //   imageSwiper = [];
  imageNxSwiper = []
  console.log(getUrlKey('id'))
  axios({
    url: `${baseURL}/api/LivePictureDisplay/list`,
    method: 'GET',
    params: {
      liveId: getUrlKey('id'),
      page: 1,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res.data.data)
    imgageListz = res.data.data
    imgageListf = res.data.data
    imgageTimeList = res.data.data
    const tabContent = document.querySelector('.tab-content') // 获取 .tab-content 元素
    // 清空当前的图片列表
    tabContent.innerHTML = ''
    res.data.data.forEach((item, index) => {
      //  console.log(index)
      const imgElement = document.createElement('img')
      const divElement = document.createElement('div')
      divElement.style.marginBottom = '0.2rem'
      imgElement.src = item.urlSL
      //   添加自定义属性
      imgElement.dataset.urlGQ = 'https://pic.nbblmc.cn' + item.urlGQ
      imgElement.alt = 'Image'
      imgElement.className = 'picContainer'
      imgElement.id = item.id
      imgElement.dataset.id = item.id
      imgElement.dataset.index = index
      imgElement.style.width = '19rem'
      divElement.style.width = '19rem'
      imgElement.style.height = '12.2rem'
      divElement.style.height = '12.2rem'
      // const firstChild = divElement.firstChild;
      // console.log(firstChild)
      divElement.appendChild(imgElement)

      tabContent.appendChild(divElement) // 将图片添加到 .tab-content 中
      imageList.push(divElement) // 将图片元素添加到 imageList 数组中
    })
  })
}

// 使用 setInterval 调用 imageRender 函数，周期为 20000 毫秒（20秒）
renderInterval = setInterval(imageRender, 20000)

// 初次调用 imageRender 函数
imageRender()
// console.log(imageSwiper)
// 获取页面上所有的 'transmit' 元素
// const shares = document.querySelectorAll('.transmit');

//     // 遍历所有的 'transmit' 元素
//     shares.forEach(function(share) {
//     // 根据 ifShare 的值设置显示或隐藏
//     if (ifShare === 1) {
//     share.style.display = 'block'; // 或者使用 'flex', 'inline' 等
//     } else {
//     share.style.display = 'none';
//     }
//   })

//     const btnImgages = document.querySelectorAll('.download')
//     btnImgages.forEach(function(btnImgage) {
//      if (ifPush === 1) {
//      btnImgage.style.display = 'block'; // 或者使用 'flex', 'inline' 等，取决于按钮的初始样式
//      } else {
//      btnImgage.style.display = 'none';
//      }
//     })

//     shares.forEach(item => {
//         item.addEventListener('click',function() {
//             window.CP2.showShare({ title: '图片直播' }).then((res) => {
//              console.log(res);
//             });
//         })
//     })

// }

// 表图
let headerUrl, liveName, watchNumber, ifPush, ifShare, address, endTime, status

// 直播标题

// 观看的人数

// 获取直播对象
function liveObjApi(liveId) {
  axios({
    url: `${baseURL}/api/LivePictureDisplay/liveObj/${liveId}`,
    method: 'GET',
  }).then((res) => {
    console.log(res)
    headerUrl = res.data.data.photoUrl
    liveName = res.data.data.name
    watchNumber = res.data.data.watchNumber
    console.log(watchNumber)
    ifPush = res.data.data.ifPush
    ifShare = res.data.data.ifShare
    address = res.data.data.address
    timeStamp = res.data.data.endTime
    status = res.data.data.status
    console.log(status)
    // 创建一个Date对象
    const date = new Date(timeStamp)
    endTime =
      date.getFullYear() +
      '-' +
      ('0' + (date.getMonth() + 1)).slice(-2) +
      '-' +
      ('0' + date.getDate()).slice(-2)
    console.log(endTime)
    // 获取页面上所有的 'transmit' 元素
    const shares = document.querySelectorAll('.transmit')
    console.log(shares)
    //   if (ifShare === 1) {
    // share.style.display = 'block'; // 或者使用 'flex', 'inline' 等
    // } else {
    // share.style.display = 'none';
    // }

    // 根据 status 的值来开启或关闭定时器
    // if (status === 1) {
    //   // 如果 status 为 1，开启定时器
    //   renderInterval = setInterval(imageRender, 20000);
    //   // 使用 setInterval 调用 imageRender 函数，周期为 20000 毫秒（20秒）
    //   renderHotInterval = setInterval(hotImageRander, 20000);
    //   // 每隔20秒调用一次 liveObjApi 函数
    //   renderObjInterval = setInterval(function() {
    //      liveObjApi(liveId)
    //       }, 20000)
    // } else if (status === 0 && renderInterval && hotImageRander && renderObjInterval) {
    //   // 如果 status 为 0，并且定时器已经开启，则关闭定时器
    //   clearInterval(renderInterval);
    //   clearInterval(hotImageRander)
    //   clearInterval(renderObjInterval)
    // }
    document.querySelector('.headerUrl').src = headerUrl
    document.querySelector('.tcHeaderUrl').src = headerUrl
    document.querySelector('.watchNumber').innerHTML = watchNumber
    document.querySelector('.liveName').innerHTML = liveName
    document.querySelector('.tcTitle').innerHTML = liveName
    document.querySelector('.zj').innerHTML = address
    document.querySelector('.rq').innerHTML = endTime
  })
}

// console.log(address)
// 初次调用 live
liveObjApi(liveId) // 立即执行一次

console.log(headerUrl)

const share = document.querySelector('.transmit')
console.log(share)

// 每隔20秒调用一次 liveObjApi 函数
renderObjInterval = setInterval(function () {
  liveObjApi(liveId)
}, 20000)

// console.log(url)

function getUrlKey(name) {
  return (
    decodeURIComponent(
      (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
        location.href
      ) || [, ''])[1].replace(/\+/g, '%20')
    ) || null
  )
}

// let isClicked = false; // 添加一个标志变量来跟踪按钮是否已被点击
// 点击下载图片
const downLoad = document.querySelector('.downLoad')
downLoad.onclick = function () {
  //   if (isClicked) {
  //       return; // 如果已经点击过，直接返回，不执行任何操作
  //   }
  //   isClicked = true; // 标记为已点击
  mode = '下载'
  clearInterval(renderInterval) // 清除定时器
  clearInterval(renderHotInterval) // 清除定时器
  clearInterval(renderObjInterval) // 清除定时器
  console.log(mode)
  // 热门的checkbox
  const hotCheckbox = document.querySelectorAll('.hotCheckbox')
  // console.log(hotCheckbox)
  hotCheckbox.forEach((item) => {
    //   console.log(item)
    item.style.display = 'block'
    item.checked = false
  })

  // 瀑布流的checkbox
  const choosePic = document.querySelectorAll('.choosePic')
  choosePic.forEach((item) => {
    //   console.log(item)
    item.style.display = 'block'
    item.checked = false
  })

  // 时间线的checkbox
  const timeCheckbox = document.querySelectorAll('.timeCheckbox')
  timeCheckbox.forEach((item) => {
    //   console.log(item)
    item.style.display = 'block'
    item.checked = false
  })
  //   hotCheckbox.style.display='block'
  const downLoadFooter = document.querySelector('.batchDownload-footer')
  //   console.log(downLoadFooter)
  downLoadFooter.style.display = 'block'
  // console.log(tabContent)
  console.log(imageList)
  imageList.forEach((item, index) => {
    // console.log(item)
    item.classList.add('imageItem')
    // 创建复选框
    const checkBox = document.createElement('input')
    // checkBox.style.width='1rem'
    // checkBox.style.height = '1rem'
    checkBox.classList.add('checkbox')
    checkBox.type = 'checkbox' // 设置类型为checkbox
    item.appendChild(checkBox)
  })

  console.log(imageWaterfallFlowList)

  imageWaterfallFlowList.forEach((item, index) => {
    // console.log(item)
    item.classList.add('imageWaterfallFlowItem')
    // 创建复选框
    const checkBox = document.createElement('input')
    // checkBox.style.width='1rem'
    // checkBox.style.height = '1rem'
    checkBox.classList.add('WaterfallFlowCheckbox')
    checkBox.type = 'checkbox' // 设置类型为checkbox
    item.appendChild(checkBox)
  })
}

// 收集图片id的数组
let ids = []

// 收集图片url的数组
let picList = []

let mySwiper

// 判断是否进入图片还是下载
let mode = ''
let sheets = document.querySelector('.batchDownload-footer-select-count-hint')

// 点击图片直播
document.querySelector('.tab-content').addEventListener('click', (e) => {
  if (mode === '下载') {
    // console.log(e.target.tagName);
    if (e.target.tagName === 'INPUT') {
      const img = e.target.previousSibling
      console.log(img)
      e.target.id = img.id
      // console.log(e.target)
      // console.log(ids)
      if (e.target.checked) {
        let inputNumeriCalId = Number(e.target.id)
        ids.push(inputNumeriCalId)
        sheets.innerText = ids.length
        console.log(ids.length)
        console.log(img.dataset.urlGQ)
        picList.push(img.dataset.urlGQ)
        console.log(picList)
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== img.dataset.urlGQ)
        console.log(picList)
      }
    }
    if (e.target.tagName === 'IMG') {
      //   console.log(e.target)
      const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
      //   console.log(checkbox)
      //   console.log(ids)
      checkbox.checked = !checkbox.checked
      // sheets.innerText = ids.length
      picList.push(e.target.dataset.urlGQ)
      console.log(picList)
      if (checkbox.checked) {
        let numericalId = Number(e.target.id) // 转换数字
        ids.push(numericalId)
        console.log(ids.length)
        sheets.innerText = ids.length
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        //  console.log(ids.length)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== e.target.dataset.urlGQ)
      }
    }
  } else {
    const id = e.target.getAttribute('data-id')
    window.location.href = './detail.html?id=' + id + '&liveId=' + liveId
  }
})

// 点击热门图片
document.querySelector('.poPular').addEventListener('click', (e) => {
  if (mode === '下载') {
    // console.log(e.target.tagName);
    if (e.target.tagName === 'INPUT') {
      const img = e.target.previousSibling
      // console.log(img.id)
      e.target.id = img.id
      // console.log(e.target)
      // console.log(ids)
      if (e.target.checked) {
        let inputNumeriCalId = Number(e.target.id)
        ids.push(inputNumeriCalId)
        sheets.innerText = ids.length
        console.log(ids.length)
        picList.push(img.dataset.urlGQ)
        console.log(picList)
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        console.log(ids)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== img.dataset.urlGQ)
        console.log(picList)
      }
    }
    if (e.target.tagName === 'IMG') {
      //   console.log(e.target)
      const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
      //   console.log(checkbox)
      console.log(ids)
      checkbox.checked = !checkbox.checked
      // sheets.innerText = ids.length
      picList.push(e.target.dataset.urlGQ)
      console.log(picList)
      if (checkbox.checked) {
        let numericalId = Number(e.target.id) // 转换数字
        ids.push(numericalId)
        console.log(ids.length)
        sheets.innerText = ids.length
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        console.log(ids.length)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== e.target.dataset.urlGQ)
      }
    }
  } else {
    const id = e.target.getAttribute('data-id')
    window.location.href =
      './detail.html?id=' + id + '&liveId=' + liveId + '&type=hotList'
  }
})

// tab点击
const tab1 = document.querySelector('.tab1')
const tab2 = document.querySelector('.tab2')

// 点击图片直播
tab1.onclick = function () {
  if (tab1.classList.contains('.tab-active') === false) {
    tab1.classList.add('tab-active')
    tab2.classList.remove('tab-active')
    const tabContent = document.querySelector('.tab-content')
    const poPular = document.querySelector('.poPular')
    tabContent.style.display = 'flex'
    poPular.style.display = 'none'
    palaceGrid.style.display = 'none'
    timeLine.style.display = 'none'
    timeLineFx.style.display = 'none'
  }
  listDom.style.display = 'none'
}

// 点击热门
let poPular = document.querySelector('.poPular')

let isRendered = false

tab2.onclick = function () {
  if (tab2.classList.contains('.tab-active') === false) {
    tab2.classList.add('tab-active')
    tab1.classList.remove('tab-active')
    const tabContent = document.querySelector('.tab-content')
    tabContent.style.display = 'none'
    timeLine.style.display = 'none'
    timeLineFx.style.display = 'none'
    palaceGrid.style.display = 'none'
    poPular.style.display = 'flex'
    listDom.style.display = 'none'
    if (!isRendered) {
      hotImageRander()
    }
  }
}

// 热门图片的渲染
function hotImageRander() {
  houtImageSwiper = []
  axios({
    url: `${baseURL}/api/LivePictureDisplay/hotList`,
    method: 'GET',
    params: {
      liveId: getUrlKey('id'), // 确保这个函数被定义
      page: 1,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res)
    if (!isRendered) {
      const bigPics = document.querySelector('.hot-big-pics')
      const smallPics = document.querySelector('.hot-small-pics')
      let bigHtml = ''
      let smallHtml = ''
      res.data.data.forEach((item, index) => {
        // 创建imgItem的div元素
        //   const imgItemDiv = document.createElement('div');
        //   imgItemDiv.className = 'imgItem'; // 设置类名为imgItem
        //  console.log(item.urlSL)
        //  const imageSwiperHotOne = document.createElement('img')
        //   imageSwiperHotOne.src = item.urlSL
        // //   console.log(imageSwiperHotOne)
        //   imageSwiperHotOne.dataset.urlGQ = 'https://pic.nbblmc.cn'+ item.urlGQ
        //   imageSwiperHotOne.dataset.index = index
        //   imageSwiperHotOne.id = item.id
        //   imgItemDiv.appendChild(imageSwiperHotOne)
        //   console.log(imgItemDiv)
        //   houtImageSwiper.push(imageSwiperHotOne)
        if (index < 3) {
          bigHtml += `<div class="imgHotItem"><img class="pic" src="${item.urlSL}" data-index=${index} data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}" id="${item.id}" data-id='${item.id}'></img><input class="hotCheckbox" type="checkbox" style="display:none"></input></div>`
        } else {
          smallHtml += `<div class="imgHotItem"><img class="pic" src="${item.urlSL}" data-index=${index} data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}" id="${item.id}" data-id='${item.id}'></img><input class="hotCheckbox" type="checkbox" style="display:none"></input></div>`
        }
        // imagehotList.push(...bigHtml,...smallHtml)
        // console.log(imagehotList)
      })

      bigPics.innerHTML = bigHtml
      smallPics.innerHTML = smallHtml
      isRendered = true // 确保渲染后设置标志为 true
    }
  })
}

// 使用 setInterval 调用 imageRender 函数，周期为 20000 毫秒（20秒）
renderHotInterval = setInterval(hotImageRander, 20000)

// console.log(houtImageSwiper)

// 二维码
const erwma = document.querySelector('.erwma')
const tc = document.querySelector('.tc')
const sc = document.querySelector('.sc')
const overlay = document.querySelector('.overlay')

// 打开二维码
erwma.addEventListener('click', function (e) {
  tc.style.display = 'block'
  overlay.style.display = 'block'
  document.body.classList.add('no-scroll')
})

// 关闭二维码
sc.addEventListener('click', function () {
  tc.style.display = 'none'
  overlay.style.display = 'none'
})

// const blue-block=document.querySelector('.blue-block')
// 语言
const yy = document.querySelector('.yy')
const pic = document.querySelector('.pic')
const selectYy = document.querySelector('.select_yy')
const wz = document.querySelector('.wz')
const wz1 = document.querySelector('.wz1')
const wz2 = document.querySelector('.wz2')
const xcbox = document.querySelector('.xcbox')
const zj = document.querySelector('.zj')

// 打开语言
yy.onclick = function () {
  selectYy.style.display = 'block'
  overlay.style.display = 'block'

  document.addEventListener('click', (e) => {
    if (e.target.className === 'overlay') {
      overlay.style.display = 'none'
      selectYy.style.display = 'none'
    }
  })
}

// 点击简体中文
wz.onclick = function () {
  if (wz1.classList.contains('show')) {
    wz1.classList.remove('show')
    wz.classList.add('show')
  }
  if (wz2.classList.contains('show')) {
    wz2.classList.remove('show')
    wz.classList.add('show')
  }
  overlay.style.display = 'none'
  selectYy.style.display = 'none'
  xcbox.innerText = `已有${watchNumber}人次浏览了此相册`
  zj.innerText = ' 浙江 宁波'
  tab1.innerText = ' 图片直播 '
  tab2.innerText = ' 热门 '
}

// 点击English
wz1.onclick = function () {
  if (wz.classList.contains('show')) {
    wz.classList.remove('show')
    wz1.classList.add('show')
  }
  if (wz2.classList.contains('show')) {
    wz2.classList.remove('show')
    wz1.classList.add('show')
  }
  selectYy.style.display = 'none'
  overlay.style.display = 'none'
  xcbox.innerText = `${watchNumber}views`
  zj.innerText = 'Zhejiang Ningbo'
  tab1.innerText = ' Live Photos '
  tab2.innerText = ' Hots '
}

// 点击繁体中文
wz2.onclick = function () {
  if (wz.classList.contains('show')) {
    wz.classList.remove('show')
    wz2.classList.add('show')
  }
  if (wz1.classList.contains('show')) {
    wz1.classList.remove('show')
    wz2.classList.add('show')
  }
  selectYy.style.display = 'none'
  overlay.style.display = 'none'
  xcbox.innerText = `已有${watchNumber}人次瀏覽了此相冊`
  zj.innerText = ' 浙江 寧波'
  tab1.innerText = ' 圖片直播 '
  tab2.innerText = ' 熱門 '
}

// 点击分类
const fl = document.querySelector('.fl')
const pb = document.querySelector('.pb')
const sj = document.querySelector('.sj')
const gg = document.querySelector('.gg')
const zx = document.querySelector('.zx')
const fx = document.querySelector('.fx')
const selectBox2 = document.querySelector('.select_box2')
const timeLine = document.querySelector('.timeLine')
const timeLineFx = document.querySelector('.timeLineFx')
const tabContent = document.querySelector('.tab-content')
fl.addEventListener('click', function (e) {
  selectBox2.style.display = 'flex'
  overlay.style.display = 'block'
  document.addEventListener('click', (e) => {
    if (e.target.className === 'overlay') {
      overlay.style.display = 'none'
      selectBox2.style.display = 'none'
    }
  })
})

// 点击瀑布流
pb.onclick = function () {
  listDom.innerHTML = ''
  if (sj.classList.contains('show')) {
    sj.classList.remove('show')
    pb.classList.add('show')
  }
  if (gg.classList.contains('show')) {
    gg.classList.remove('show')
    pb.classList.add('show')
  }
  listDom.style.display = 'block'
  overlay.style.display = 'none'
  selectBox2.style.display = 'none'
  tabContent.style.display = 'none'
  timeLine.style.display = 'none'
  timeLineFx.style.display = 'none'
  palaceGrid.style.display = 'none'
  poPular.style.display = 'none'
  putPics(imgageListz)
  console.log(imgageListz)
}

// 瀑布流渲染
const listDom = document.querySelector('.pics-list')
listDom.addEventListener('click', (e) => {
  if (mode === '下载') {
    // console.log(e.target.tagName);
    if (e.target.tagName === 'INPUT') {
      const img = e.target.previousSibling.previousSibling
      // console.log(img.id)
      e.target.id = img.id
      // console.log(e.target)
      // console.log(ids)
      if (e.target.checked) {
        let inputNumeriCalId = Number(e.target.id)
        ids.push(inputNumeriCalId)
        sheets.innerText = ids.length
        console.log(ids.length)
        console.log(img)
        picList.push(img.dataset.urlGQ)
        console.log(picList)
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        console.log(ids)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== img.dataset.urlGQ)
        console.log(picList)
      }
    }
    if (e.target.tagName === 'IMG') {
      //   console.log(e.target)
      const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
      //   console.log(checkbox)
      console.log(ids)
      checkbox.checked = !checkbox.checked
      // sheets.innerText = ids.length
      picList.push(e.target.dataset.urlGQ)
      console.log(picList)
      if (checkbox.checked) {
        let numericalId = Number(e.target.id) // 转换数字
        ids.push(numericalId)
        console.log(ids.length)
        sheets.innerText = ids.length
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        console.log(ids.length)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== e.target.dataset.urlGQ)
      }
    }
  }
})

// 瀑布流渲染 (外层有一个div包裹，里面是图片和checkBox的)-----------------------------------------------------------
async function putPics(pics) {
  console.log(pics)
  const listDom = document.querySelector('.pics-list')
  listDom.style.display = 'block'
  const _w = window.innerWidth / 2 - 1
  let html = ``
  for (let [i, item] of pics.entries()) {
    // console.log(item)
    const { width, height } = await getWH(item.urlSL)
    item.height = (height * _w) / width + 2
    if (i % 2 === 0) {
      // 左边的图片
      let top = 0
      if (i === 0) {
        top = 0
      } else {
        top = addUpHeight(0, pics, i, 0) + 'px'
      }
      html += `
        <div class="detailImg" id="${item.id}" style="width: calc(50% - 1px); height: auto; left: 0; margin-right: 1px; top: ${top}; " data-id="${item.id}">
          <img src="${item.urlSL}" data-index=${i} data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}" id="${item.id}">
          <input type="checkbox"  class="choosePic" style="display:none">
        </div>
      `
    } else {
      // 右边的图片
      let top = 0
      if (i === 1) {
        top = 0
      } else {
        top = addUpHeight(1, pics, i, 0) + 'px'
      }
      html += `
        <div class="detailImg" data-id="${item.id}" style="width: calc(50% - 1px); height: auto; left: 50%; margin-left: 1px; top: ${top}; ">
          <img src="${item.urlSL}" data-index=${i} data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}" id="${item.id}">
          <input type="checkbox" class="choosePic" style="display:none">
        </div>
      `
    }
  }

  listDom.innerHTML = html
  // 模拟点击图片详情进入详情页面
  const all_pics = listDom.querySelectorAll('.detailImg')
  console.log(all_pics)
  for (let i = 0; i < all_pics.length; i++) {
    all_pics[i].addEventListener('click', function (e) {
      console.log(e.currentTarget)
      const id = e.currentTarget.getAttribute('data-id')
      console.log('点击图片的id是：', id)
      window.location.href = './detail.html?id=' + id + '&liveId=' + liveId
    })
  }
}

function getWH(url) {
  const img = new Image()
  img.src = url
  return new Promise((resolve) => {
    // if (img.complete) {
    //   resolve({ width: img.width, height: img.height });
    // } else {

    // }
    img.onload = function () {
      resolve({ width: img.width, height: img.height })
    }
  })
}

function addUpHeight(start, pics, i, height) {
  if (i - 2 === start) {
    height += pics[i - 2].height
    return height
  } else if (i - 2 > start) {
    height += pics[i - 2].height
    return addUpHeight(start, pics, i - 2, height)
  }
}

// 点击时间线
sj.onclick = function () {
  timeLine.innerHTML = ''
  if (pb.classList.contains('show')) {
    pb.classList.remove('show')
    sj.classList.add('show')
  }
  if (gg.classList.contains('show')) {
    gg.classList.remove('show')
    sj.classList.add('show')
  }
  //   listDom.style.display = 'block'
  overlay.style.display = 'none'
  selectBox2.style.display = 'none'
  poPular.style.display = 'none'
  console.log(timeLine)
  timeLine.style.display = 'block'
  timeLineFx.style.display = 'none'
  tabContent.style.display = 'none'
  palaceGrid.style.display = 'none'
  listDom.style.display = 'none'
  console.log(imgageTimeList)

  imgageMapTimeList = imgageTimeList.map((item) => {
    return {
      ...item,
      createTime: secondsToYearsMonthsDaysHours(item.createTime),
      updateTime: secondsToYearsMonthsDaysHours(item.updateTime),
    }
  })

  console.log(imgageMapTimeList)

  imgageMapTimeList.forEach((item, index) => {
    //   console.log(item)
    const imgListHtml = `
      <div class="time-wrap">
        <div class="title">
          <div class="circel-wrap"></div>
          <p class="time">${item.createTime}</p>
          <img class="arror" src="./images/double-arror.svg">
        </div>
        <div class="photoTimeLineBox" data-open="true" style="display:flex;">
          <img class="timeImg"  src="${item.urlSL}" alt="Image" data-index=${index} data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}" id="${item.id}" data-id='${item.id}'>
          <input class="timeCheckbox" type="checkbox" style="display:none">
      </div>
      </div>
      
    `
    // 使用 insertAdjacentHTML 追加内容
    timeLine.insertAdjacentHTML('beforeend', imgListHtml)
  })

  // 点击时间线
  const timeTitle = document.querySelectorAll('.time-wrap .title')
  // console.log(timeTitle);
  timeTitle.forEach((title) => {
    title.addEventListener('click', function (event) {
      // 这里一定要这样写，function 不要写箭头函数
      const nextSibling = this.nextElementSibling // 展开这个时间点的图片
      console.log(nextSibling)
      const isOpen = nextSibling.getAttribute('data-open') // 我在这个节点上写了一个属性：控制他是否要展开
      const children = this.children
      const arror = children[children.length - 1]
      console.log('当前点击的dom', this)
      if (isOpen === 'false') {
        nextSibling.setAttribute('data-open', true)
        nextSibling.style.display = 'flex'
        arror.style.transform = 'rotate(90deg)'
      } else {
        nextSibling.setAttribute('data-open', false)
        nextSibling.style.display = 'none'
        arror.style.transform = 'rotate(0deg)'
      }
    })
  })

  // document.querySelector('.photoTimeLineBox').addEventListener('click',(e)=> {
  //     console.log(e.target)
  // })

  const photoTimeLineBox = document.querySelectorAll('.photoTimeLineBox')
  console.log(photoTimeLineBox)
  photoTimeLineBox.forEach((item) => {
    // console.log(item)
    item.addEventListener('click', function (e) {
      if (mode === '下载') {
        // console.log(e.target.tagName);
        if (e.target.tagName === 'INPUT') {
          const img = e.target.previousSibling.previousSibling
          console.log(e.target.previousSibling.previousSibling)
          // e.target.id = img.id
          e.target.id = img.id
          // console.log(e.target)
          // console.log(ids)
          if (e.target.checked) {
            let inputNumeriCalId = Number(e.target.id)
            ids.push(inputNumeriCalId)
            sheets.innerText = ids.length
            console.log(ids.length)
            picList.push(img.dataset.urlGQ)
            console.log(picList)
          } else {
            // 如果被取消选中，从 ids 数组中移除该 id
            ids = ids.filter((id) => id !== Number(e.target.id))
            sheets.innerText = ids.length
            picList = picList.filter((item) => item !== img.dataset.urlGQ)
            console.log(picList)
          }
        }
        if (e.target.tagName === 'IMG') {
          //   console.log(e.target)
          const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
          //   console.log(checkbox)
          //   console.log(ids)
          checkbox.checked = !checkbox.checked
          // sheets.innerText = ids.length
          picList.push(e.target.dataset.urlGQ)
          console.log(picList)
          if (checkbox.checked) {
            let numericalId = Number(e.target.id) // 转换数字
            ids.push(numericalId)
            console.log(ids.length)
            sheets.innerText = ids.length
          } else {
            // 如果被取消选中，从 ids 数组中移除该 id
            ids = ids.filter((id) => id !== Number(e.target.id))
            //  console.log(ids.length)
            sheets.innerText = ids.length
            picList = picList.filter((item) => item !== e.target.dataset.urlGQ)
          }
        }
      } else {
        const id = e.target.getAttribute('data-id')
        window.location.href = './detail.html?id=' + id + '&liveId=' + liveId
      }
    })
  })
}

// 渲染时间线
function timeLineApi(imgageMapList) {
  console.log(imgageMapList)
  imgageMapList.forEach((item, index) => {
    // console.log(item)
    const imgListHtml = `
      <div class="time-wrap">
        <div class="title">
          <div class="circel-wrap"></div>
          <p class="time">${item.createTime}</p>
          <img class="arror" src="./images/double-arror.svg">
        </div>
        <div class="photoTimeLineBox" data-open="true" style="display:flex;" data-id='${item.id}'>
          <img class="timeImg"  src="${item.urlSL}" alt="Image" id="${item.id}" data-index="${index}" data-id='${item.id}' data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}"/>
          <input class="timeCheckbox" type="checkbox" style="display:none"></input>
      </div>
      </div>
      
    `
    // 使用 insertAdjacentHTML 追加内容
    timeLineFx.insertAdjacentHTML('beforeend', imgListHtml)
  })

  // 添加时间线的点击事件
  const timeTitle = document.querySelectorAll('.time-wrap .title')
  console.log(timeTitle)
  timeTitle.forEach((title) => {
    title.addEventListener('click', function (event) {
      // 这里一定要这样写，function 不要写箭头函数
      const nextSibling = this.nextElementSibling // 展开这个时间点的图片
      console.log(nextSibling)
      const isOpen = nextSibling.getAttribute('data-open') // 我在这个节点上写了一个属性：控制他是否要展开
      const children = this.children
      const arror = children[children.length - 1]
      console.log('当前点击的dom', this)
      if (isOpen === 'false') {
        nextSibling.setAttribute('data-open', true)
        nextSibling.style.display = 'flex'
        arror.style.transform = 'rotate(90deg)'
      } else {
        nextSibling.setAttribute('data-open', false)
        nextSibling.style.display = 'none'
        arror.style.transform = 'rotate(0deg)'
      }
    })
  })
}

function secondsToYearsMonthsDaysHours(seconds) {
  const date = new Date(seconds)
  return date.toLocaleString()
}

// 点击宫格式
gg.onclick = function () {
  const palaceGrid = document.querySelector('.palaceGrid')
  palaceGrid.innerHTML = ''
  if (pb.classList.contains('show')) {
    pb.classList.remove('show')
    gg.classList.add('show')
  }
  if (sj.classList.contains('show')) {
    sj.classList.remove('show')
    gg.classList.add('show')
  }
  overlay.style.display = 'none'
  selectBox2.style.display = 'none'
  tabContent.style.display = 'none'
  poPular.style.display = 'none'
  timeLine.style.display = 'none'
  timeLineFx.style.display = 'none'
  palaceGrid.style.display = 'flex'
  listDom.style.display = 'none'
}

// 点击正序
zx.onclick = function () {
  if (fx.classList.contains('show')) {
    fx.classList.remove('show')
    zx.classList.add('show')
  }
  overlay.style.display = 'none'
  selectBox2.style.display = 'none'
  if (sj.classList.contains('show')) {
    console.log(1)
    //   timeLine.innerHTML=''
    timeLine.style.display = 'block'
    timeLineFx.style.display = 'none'
    timeLineFx.innerHTML = ''
    console.log(imgageListf)
    imgageMapList = imgageListf.map((item) => {
      return {
        ...item,
        createTime: secondsToYearsMonthsDaysHours(item.createTime),
        updateTime: secondsToYearsMonthsDaysHours(item.updateTime),
      }
    })

    console.log(imgageMapList)

    imgageMapList.forEach((item, index) => {
      // console.log(item)
      const imgListHtml = `
       <div class="time-wrap">
        <div class="title">
          <div class="circel-wrap"></div>
          <p class="time">${item.createTime}</p>
          <img class="arror" src="./images/double-arror.svg">
        </div>
        <div class="photoTimeLineBox" data-open="true" style="display:flex;">
          <img class="timeImg" src="${item.urlSL}" data-index=${index} data-url-G-Q="https://pic.nbblmc.cn${item.urlGQ}" id="${item.id} data-id=${item.id}" alt="Image"/>
          <input class="timeCheckbox" type="checkbox" style="display:none">
       </div>
      </div>
    `
      // 使用 insertAdjacentHTML 追加内容
      timeLine.insertAdjacentHTML('beforeend', imgListHtml)
    })

    const photoTimeLineBox = document.querySelectorAll('.photoTimeLineBox')
    console.log(photoTimeLineBox)
    photoTimeLineBox.forEach((item) => {
      // console.log(item)
      item.addEventListener('click', function (e) {
        if (mode === '下载') {
          // console.log(e.target.tagName);
          if (e.target.tagName === 'INPUT') {
            const img = e.target.previousSibling.previousSibling
            console.log(e.target.previousSibling.previousSibling)
            // e.target.id = img.id
            e.target.id = img.id
            // console.log(e.target)
            // console.log(ids)
            if (e.target.checked) {
              let inputNumeriCalId = Number(e.target.id)
              ids.push(inputNumeriCalId)
              sheets.innerText = ids.length
              console.log(ids.length)
              picList.push(img.dataset.urlGQ)
              console.log(picList)
            } else {
              // 如果被取消选中，从 ids 数组中移除该 id
              ids = ids.filter((id) => id !== Number(e.target.id))
              sheets.innerText = ids.length
              picList = picList.filter((item) => item !== img.dataset.urlGQ)
              console.log(picList)
            }
          }
          if (e.target.tagName === 'IMG') {
            //   console.log(e.target)
            const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
            //   console.log(checkbox)
            //   console.log(ids)
            checkbox.checked = !checkbox.checked
            // sheets.innerText = ids.length
            picList.push(e.target.dataset.urlGQ)
            console.log(picList)
            if (checkbox.checked) {
              let numericalId = Number(e.target.id) // 转换数字
              ids.push(numericalId)
              console.log(ids.length)
              sheets.innerText = ids.length
            } else {
              // 如果被取消选中，从 ids 数组中移除该 id
              ids = ids.filter((id) => id !== Number(e.target.id))
              //  console.log(ids.length)
              sheets.innerText = ids.length
              picList = picList.filter(
                (item) => item !== e.target.dataset.urlGQ
              )
            }
          }
        } else {
          const id = e.target.getAttribute('data-id')
          window.location.href = './detail.html?id=' + id + '&liveId=' + liveId
        }
      })
    })

    // 点击时间线
    const timeTitle = document.querySelectorAll('.time-wrap .title')
    console.log(timeTitle)
    timeTitle.forEach((title) => {
      title.addEventListener('click', function (event) {
        // 这里一定要这样写，function 不要写箭头函数
        const nextSibling = this.nextElementSibling // 展开这个时间点的图片
        console.log(nextSibling)
        const isOpen = nextSibling.getAttribute('data-open') // 我在这个节点上写了一个属性：控制他是否要展开
        const children = this.children
        const arror = children[children.length - 1]
        console.log('当前点击的dom', this)
        if (isOpen === 'false') {
          nextSibling.setAttribute('data-open', true)
          nextSibling.style.display = 'flex'
          arror.style.transform = 'rotate(90deg)'
        } else {
          nextSibling.setAttribute('data-open', false)
          nextSibling.style.display = 'none'
          arror.style.transform = 'rotate(0deg)'
        }
      })
    })
  }
}

// 点击逆序
fx.onclick = function () {
  if (zx.classList.contains('show')) {
    zx.classList.remove('show')
    fx.classList.add('show')
  }
  overlay.style.display = 'none'
  selectBox2.style.display = 'none'
  if (sj.classList.contains('show')) {
    // timeLine.innerHTML=''
    // console.log(1)
    const timeLineFx = document.querySelector('.timeLineFx')
    timeLineFx.innerHTML = ''
    timeLine.style.display = 'none'
    timeLineFx.style.display = 'block'

    imgageListz.sort((a, b) => {
      return a.createTime - b.createTime
    })
    console.log(imgageListz)
    const imgageMapListz = imgageListz.map((item) => {
      return {
        ...item,
        createTime: secondsToYearsMonthsDaysHours(item.createTime),
        updateTime: secondsToYearsMonthsDaysHours(item.updateTime),
      }
    })
    console.log(imgageMapListz)
    timeLineApi(imgageMapListz)
    const photoTimeLineBox = document.querySelectorAll(
      '.timeLineFx .photoTimeLineBox'
    )
    console.log(photoTimeLineBox)
    photoTimeLineBox.forEach((item) => {
      console.log(item)
      item.addEventListener('click', function (e) {
        if (mode === '下载') {
          // console.log(e.target.tagName);
          if (e.target.tagName === 'INPUT') {
            const img = e.target.previousSibling.previousSibling
            console.log(e.target.previousSibling.previousSibling)
            // e.target.id = img.id
            e.target.id = img.id
            // console.log(e.target)
            // console.log(ids)
            if (e.target.checked) {
              let inputNumeriCalId = Number(e.target.id)
              ids.push(inputNumeriCalId)
              sheets.innerText = ids.length
              console.log(ids.length)
              picList.push(img.dataset.urlGQ)
              console.log(picList)
            } else {
              // 如果被取消选中，从 ids 数组中移除该 id
              ids = ids.filter((id) => id !== Number(e.target.id))
              sheets.innerText = ids.length
              picList = picList.filter((item) => item !== img.dataset.urlGQ)
              console.log(picList)
            }
          }
          if (e.target.tagName === 'IMG') {
            //   console.log(e.target)
            const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
            //   console.log(checkbox)
            //   console.log(ids)
            checkbox.checked = !checkbox.checked
            // sheets.innerText = ids.length
            picList.push(e.target.dataset.urlGQ)
            console.log(picList)
            if (checkbox.checked) {
              let numericalId = Number(e.target.id) // 转换数字
              ids.push(numericalId)
              console.log(ids.length)
              sheets.innerText = ids.length
            } else {
              // 如果被取消选中，从 ids 数组中移除该 id
              ids = ids.filter((id) => id !== Number(e.target.id))
              //  console.log(ids.length)
              sheets.innerText = ids.length
              picList = picList.filter(
                (item) => item !== e.target.dataset.urlGQ
              )
            }
          }
        } else {
          const id = e.target.getAttribute('data-id')
          window.location.href =
            './detailNX.html?id=' + id + '&liveId=' + liveId
        }
      })
    })
  }
}

// 监听鼠标滚动事件
let backTop = document.querySelector('.back-to-top')
// let i = 10
let isScrolling = false
let scrollTimeout

window.addEventListener('scroll', function () {
  const scrollHeight = document.documentElement.scrollHeight
  const clientHeight = document.documentElement.clientHeight
  const tabbox = document.querySelector('.tabbox')
  const n = document.documentElement.scrollTop
  const show = document.querySelector('.show')
  if (n >= tabbox.offsetTop) {
    tabbox.classList.add('sticky')
    backTop.style.display = 'block'
    show.style.display = 'block'
  }
  if (n <= tabbox.offsetTop) {
    tabbox.classList.remove('sticky')
    backTop.style.display = 'none'
  }
  if (isScrolling) {
    clearTimeout(scrollTimeout)
  }
  // 滚动开始
  isScrolling = true
  // 设置一个延迟执行的函数，来检测滚动是否停止
  scrollTimeout = setTimeout(function () {
    // 滚动停止
    isScrolling = false
    // 执行滚动停止后的逻辑
    backToTopBtn.innerText = '返回顶部'
    // console.log('滚动停止了')
  }, 150) // 150毫秒内没有滚动事件则认为滚动停止
})

// 点击返回顶部
const backToTopBtn = document.querySelector('.back-to-top-text')
backTop.onclick = function () {
  window.scrollTo({ top: 0, behavior: 'smooth' })
  //   i = 0
  //   backToTopBtn.innerText = i + '/ 242'
}

document.addEventListener('DOMContentLoaded', function () {
  let isRotated = false
  const plusSign = document.querySelector('.plusSign')
  // 旋转135度
  const rotate = document.querySelector('.rotate')
  // 旋转回去135度
  const rotateBack = document.querySelector('.rotateBack')
  // 下载
  const downLoad = document.querySelector('.downLoad')
  // 点击加号
  plusSign.onclick = function () {
    if (isRotated) {
      plusSign.classList.remove('rotate')
      plusSign.classList.add('rotateBack')
      downLoad.style.display = 'none'
      downLoad.classList.add('ydBack')
      downLoad.classList.remove('yd')
      isRotated = false
    } else {
      plusSign.classList.remove('rotateBack')
      plusSign.classList.add('rotate')
      downLoad.style.display = 'block'
      downLoad.classList.add('yd')
      downLoad.classList.remove('ydBack')
      isRotated = true
    }
  }
})

// 宫格式渲染
document.querySelector('.gg').addEventListener('click', () => {
  console.log(1)
  tabContent.style.display = 'none'
  poPular.style.display = 'none'
  palaceGridApi()
})

const palaceGrid = document.querySelector('.palaceGrid')

function palaceGridApi() {
  palaceGrid.innerHTML = '' // 清空palaceGrid容器
  axios({
    url: `${baseURL}/api/LivePictureDisplay/list`,
    params: {
      liveId: getUrlKey('id'), // 确保这个函数被定义
      page: 1,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res)
    res.data.data.forEach((item, index) => {
      const imgHotElement = document.createElement('img')
      const divElement = document.createElement('div')
      imgHotElement.src = item.urlSL
      divElement.style.marginBottom = '0.2rem'
      imgHotElement.alt = 'Image'
      imgHotElement.style.width = '12.7rem'
      imgHotElement.id = item.id
      imgHotElement.dataset.index = index
      imgHotElement.dataset.urlGQ = 'https://pic.nbblmc.cn' + item.urlGQ
      divElement.style.width = '12.7rem'
      imgHotElement.style.height = '12.5rem'
      divElement.style.height = '12.5rem'
      divElement.dataset.id = item.id
      divElement.classList.add('detailGridImg')
      divElement.appendChild(imgHotElement)
      palaceGrid.appendChild(divElement)
      imageList.push(divElement)
    })
    const all_palaceGrid = document
      .querySelector('.palaceGrid')
      .querySelectorAll('.detailGridImg')
    console.log(all_palaceGrid)
    for (let i = 0; i < all_palaceGrid.length; i++) {
      all_palaceGrid[i].addEventListener('click', function (e) {
        const id = e.currentTarget.getAttribute('data-id')
        console.log(id)
        window.location.href = './detail.html?id=' + id + '&liveId=' + liveId
      })
    }
  })
}

// 点击宫格式
palaceGrid.addEventListener('click', (e) => {
  if (mode === '下载') {
    // console.log(e.target.tagName);
    if (e.target.tagName === 'INPUT') {
      const img = e.target.previousSibling
      console.log(img)
      e.target.id = img.id
      // console.log(e.target)
      // console.log(ids)
      if (e.target.checked) {
        let inputNumeriCalId = Number(e.target.id)
        ids.push(inputNumeriCalId)
        sheets.innerText = ids.length
        console.log(ids.length)
        picList.push(img.dataset.urlGQ)
        console.log(picList)
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        console.log(ids)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== img.dataset.urlGQ)
        console.log(picList)
      }
    }
    if (e.target.tagName === 'IMG') {
      //   console.log(e.target)
      const checkbox = e.target.nextElementSibling // 假设checkbox是图片的下一个兄弟元素
      //   console.log(checkbox)
      //   console.log(ids)
      checkbox.checked = !checkbox.checked
      // sheets.innerText = ids.length
      picList.push(e.target.dataset.urlGQ)
      console.log(picList)
      if (checkbox.checked) {
        let numericalId = Number(e.target.id) // 转换数字
        ids.push(numericalId)
        console.log(ids.length)
        sheets.innerText = ids.length
      } else {
        // 如果被取消选中，从 ids 数组中移除该 id
        ids = ids.filter((id) => id !== Number(e.target.id))
        //  console.log(ids.length)
        sheets.innerText = ids.length
        picList = picList.filter((item) => item !== e.target.dataset.urlGQ)
      }
    }
  }
})

// 帮助弹层
const help = document.querySelector('.help')

console.log(picList)

// 点击关闭
const close = document.querySelector('.close')
close.onclick = function () {
  const picDetails = document.querySelector('.picDetails')
  picDetails.style.display = 'none'
  renderInterval = setInterval(imageRender, 20000) // 重新设置定时器
  renderHotInterval = setInterval(hotImageRander, 20000)
  renderObjInterval = setInterval(function () {
    liveObjApi(liveId)
  }, 20000)
}

// 点击关闭图片下载的弹层
const closeButton = document.querySelector('.batchDownload-footer-select-close')
closeButton.onclick = function () {
  // 热门的checkbox
  const hotCheckbox = document.querySelectorAll('.hotCheckbox')
  console.log(hotCheckbox)
  hotCheckbox.forEach((item) => {
    item.style.display = 'none'
    item.checked = false
  })

  // 时间线的checkbox
  const timeCheckbox = document.querySelectorAll('.timeCheckbox')
  console.log(timeCheckbox)
  timeCheckbox.forEach((item) => {
    item.style.display = 'none'
    item.checked = false
  })
  ids = []
  mode = ''
  picCount.innerText = '0'
  picList = []
  // console.log(1);
  const downLoadFooter = document.querySelector('.batchDownload-footer')
  downLoadFooter.style.display = 'none'
  //   const checkbox = document.querySelector('.checkbox')
  //   checkbox.style.display = 'none'
  imageList.forEach((item) => {
    // if(item.contain)
    // console.log(item.lastChild)
    if (item.lastChild.type === 'checkbox') {
      item.lastChild.remove()
    }
  })

  imageWaterfallFlowList.forEach((item) => {
    // if(item.contain)
    // console.log(item.lastChild)
    if (item.lastChild.type === 'checkbox') {
      item.lastChild.remove()
    }
  })
}

// 选中照片次数
const picCount = document.querySelector(
  '.batchDownload-footer-select-count-hint'
)

// 点击批量下载
document
  .querySelector('.batchDownload-footer-select-confirm')
  .addEventListener('click', () => {
    renderInterval = setInterval(imageRender, 20000) // 重新设置定时器
    renderHotInterval = setInterval(hotImageRander, 20000)
    renderObjInterval = setInterval(function () {
      liveObjApi(liveId)
    }, 20000)
    if (!picList || picList.length === 0) {
      alert('没有图片可下载')
      return
    }
    console.log(ids)
    manyDownload(ids)
    alert('图片保存成功!')
    picList.forEach((url) => {
      console.log(url)
      window.CP2.saveImage({
        url,
      }).then((res) => {
        console.log(res)
      })
    })
    //   console.log(res);
    ids = []
    mode = ''
    picCount.innerText = '0'
    picList = []

    const downLoadFooter = document.querySelector('.batchDownload-footer')
    downLoadFooter.style.display = 'none'
    const checkbox = document.querySelector('.checkbox')
    // 图片直播的循环
    imageList.forEach((item) => {
      // if(item.contain)
      // console.log(item.lastChild)
      if (item.lastChild.type === 'checkbox') {
        item.lastChild.remove()
      }
    })

    // 瀑布流的循环
    imageWaterfallFlowList.forEach((item) => {
      // if(item.contain)
      // console.log(item.lastChild)
      if (item.lastChild.type === 'checkbox') {
        item.lastChild.remove()
      }
    })

    // 热门的checkbox
    const hotCheckbox = document.querySelectorAll('.hotCheckbox')
    hotCheckbox.forEach((item) => {
      item.style.display = 'none'
      //  item..type=false
    })

    //  时间线的checkbox
    const timeCheckbox = document.querySelectorAll('.timeCheckbox')
    timeCheckbox.forEach((item) => {
      item.style.display = 'none'
      //  item..type=false
    })

    // 瀑布流的checkbox
    const choosePic = document.querySelectorAll('.choosePic')
    choosePic.forEach((item) => {
      item.style.display = 'none'
      //  item..type=false
    })
  })

// 多图下载
function manyDownload(ids) {
  axios({
    url: `${baseURL}/api/LivePictureDisplay/DownloadImgs`,
    method: 'GET',
    params: {
      ids: ids.join(','),
    },
  }).then((res) => {
    console.log(res)
  })
}
